<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/views/include/taglib.jsp" %>
<%--流程图表--%>
<div id="flowChart" style="width: 860px;height: 400px;margin:30px 0;"></div>
<form:form commandName="taskjob" cssClass="form-horizontal" role="form">
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskName">*任务名称</label>
        <div class="col-sm-4">
            <input type="text" name="taskName" id="taskName" placeholder="任务名称" value="${taskjob.taskName}"
                   class="form-control " required>
        </div>

        <label class="col-sm-2 control-label no-padding-right" for="projectName">*项目名称</label>
        <div class="col-sm-4">
            <input type="text" name="projectName" id="projectName" placeholder="项目名称" value="${taskjob.projectName}"
                   class="form-control " required>
        </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskContent">*任务内容</label>
        <div class="col-sm-10">
            <textarea rows="5" id="taskContent" name="taskContent" placeholder="任务内容" value="${taskjob.taskContent}"  style="resize: vertical;min-height: 100px"
                      class="form-control " required/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="planStartDate">计划开始时间</label>
        <div class="col-sm-4">
            <input type="text" name="planStartDate" id="planStartDate" placeholder="计划开始时间"
                   value="${taskjob.planStartDate}" class="form-control date-picker" required readonly>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="planEndDate">计划结束时间</label>
        <div class="col-sm-4">
            <input type="text" name="planEndDate" id="planEndDate" placeholder="计划结束时间" value="${taskjob.planEndDate}"
                   class="form-control date-picker" required readonly>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="startDate">*开始时间</label>
        <div class="col-sm-4">
            <input type="text" name="startDate" id="startDate" placeholder="开始时间" value="${taskjob.startDate}" readonly
                   class="form-control date-picker" required>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="endDate">*结束时间</label>
        <div class="col-sm-4">
            <input type="text" name="endDate" id="endDate" placeholder="结束时间" value="${taskjob.endDate}" readonly
                   class="form-control date-picker" required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="respResult">责任单位反馈结果</label>
        <div class="col-sm-4">
            <input type="text" name="respResult" id="respResult" placeholder="责任单位反馈结果" value="0"
                   class="form-control ">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="supervisionResult">督察组反馈结果</label>
        <div class="col-sm-4">
            <input type="text" name="supervisionResult" id="supervisionResult" placeholder="结束时间"
                   value="0" class="form-control ">
        </div>
    </div>

    <%--节点id的后台name  需修改为nodeNames--%>
    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="nodeId">*节点ID</label>
        <div class="col-sm-4">
            <input type="text" name="nodeId" id="nodeId" placeholder="节点ID" value="${taskjob.nodeId}"
                   class="form-control " required>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="node-Name">*节点名称</label>
        <div class="col-sm-4">
            <input type="text" name="nodeNames" id="node-Name" placeholder="节点名称" value="${taskjob.nodeName}"
                   class="form-control " required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="resDept">责任单位</label>
        <div class="col-sm-4">
            <input type="text" name="resDept" id="resDept" placeholder="责任单位" value="${taskjob.resDept}"
                   class="form-control ">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="resUser">*责任人</label>
        <div class="col-sm-4">
            <input type="text" name="resUser" id="resUser" placeholder="责任人" value="${taskjob.resUser}"
                   class="form-control " required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="resPhone">*责任人手机号</label>
        <div class="col-sm-4">
            <input type="text" name="resPhone" id="resPhone" placeholder="责任人手机号" value="${taskjob.resPhone}"
                   class="form-control " required>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="operatorUser">*经办人</label>
        <div class="col-sm-4">
            <input type="text" name="operatorUser" id="operatorUser" placeholder="经办人" value="${taskjob.operatorUser}"
                   class="form-control " required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="operatorPhone">*经办人手机号</label>
        <div class="col-sm-4">
            <input type="text" name="operatorPhone" id="operatorPhone" placeholder="经办人手机号"
                   value="${taskjob.operatorPhone}" class="form-control " required>
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="taskStage">任务阶段</label>
        <div class="col-sm-4">
            <input type="text" name="taskStage" id="taskStage" placeholder="任务阶段" value="${taskjob.taskStage}"
                   class="form-control ">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="nodeDetail">*节点详情</label>
        <div class="col-sm-10">
            <textarea rows="5" id="nodeDetail" name="nodeDetail" placeholder="节点详情" value="${taskjob.nodeDetail}" style="resize: vertical;min-height: 100px"
                      class="form-control " required/>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskDate">任务时间</label>
        <div class="col-sm-4">
            <input type="text" name="taskDate" id="taskDate" placeholder="任务时间" value="${taskjob.taskDate}"
                   class="form-control ">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="responseTime">响应时间</label>
        <div class="col-sm-4">
            <input type="text" name="responseTime" id="responseTime" placeholder="响应时间" value="${taskjob.responseTime}"
                   class="form-control ">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="expirationDate">任务到期时间</label>
        <div class="col-sm-4">
            <input type="text" name="expirationDate" id="expirationDate" placeholder="任务到期时间"
                   value="${taskjob.expirationDate}" class="form-control ">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="groupName">*督查组类别</label>
        <div class="col-sm-4">
            <input type="text" name="groupName" id="groupName" placeholder="督查组类别" value="${taskjob.groupName}"
                   class="form-control " required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="groupMember">督查组成员</label>
        <div class="col-sm-4">
            <input type="text" name="groupMember" id="groupMember" placeholder="督查组成员"
                   class="form-control ">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="phones">*手机号</label>
        <div class="col-sm-4">
            <input type="text" name="phones" id="phones" placeholder="手机号" value="${taskjob.phones}"
                   class="form-control " required>
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="taskResult">任务最终结果</label>
        <div class="col-sm-4">
            <input type="text" name="taskResult" id="taskResult" placeholder="任务最终结果" value="0"
                   class="form-control ">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="isfeedback">是否反馈攻坚</label>
        <div class="col-sm-4">
            <input type="text" name="isfeedback" id="isfeedback" placeholder="是否反馈攻坚" value="${taskjob.isfeedback}"
                   class="form-control ">
        </div>
    </div>

    <div class="form-group">
        <label class="col-sm-2 control-label no-padding-right" for="respScore">责任单位得分</label>
        <div class="col-sm-4">
            <input type="text" name="respScore" id="respScore" placeholder="责任单位得分" value="${taskjob.respScore}"
                   class="form-control ">
        </div>
        <label class="col-sm-2 control-label no-padding-right" for="supervisionScore">督查单位得分</label>
        <div class="col-sm-4">
            <input type="text" name="supervisionScore" id="supervisionScore" placeholder="督查单位得分"
                   value="${taskjob.supervisionScore}" class="form-control ">
        </div>
    </div>

    <%--任务id  隐藏--%>
    <input type="text" id="taskId" value="${taskjob.sysId}" hidden>
    <form:hidden path="sysId"/>
</form:form>
<%--流程图表--%>
<script>
    /**
     *
     * @param p
     */
    function flowChart(p) {
        var datas = [{
            name: '任务生成',
            x: 0,
            y: 0
        }, {
            name: '任务开始',
            x: 50,
            y: 0
        }, {
            name: '任务执行中',
            x: 100,
            y: 0
        }, {
            name: '任务完成',
            x: 150,
            y: 20
        }, {
            name: '任务未完成',
            x: 150,
            y: -20
        }, {
            name: '反馈攻坚',
            x: 200,
            y: -50
        }, {
            name: '完成情况',
            x: 120,
            y: 30
        }, {
            name: '督查记录',
            x: 80,
            y: 30
        }, {
            name: '督查组需协调事项',
            x: 80,
            y: 60
        }, {
            name: '责任单位需协调事项',
            x: 120,
            y: 60
        }, {
            name: '督察得分',
            x: 230,
            y: 20
        }];

        var links = p.graph;
        //任务进行到某步球体变为绿色   1 = 蓝色   0 = 绿色
        var arr = p.green;
        for (var i = 0; i < datas.length; i++) {
            datas[i].category = arr[i];
        }
        var option = {
            // tooltip: {
            // },
            grid: {
                bottom: "5%",
                top: "5%"
            },
            //数据更新动画的时长。
            animationDurationUpdate: 1500,
            //数据更新动画的缓动效果。
            animationEasingUpdate: 'quinticInOut',
            color: "#2EABFF",
            series: [{
                animationDuration: 6000,
                type: 'graph',
                categories: [{
                    name: '',
                    itemStyle: {
                        normal: {
                            color: "#009800",
                        }
                    }
                }],
                layout: 'none',
                //节点大小
                symbolSize: [60, 60],
                //roam: true,
                //节点文字是否显示
                label: {
                    normal: {
                        show: true,
                    }
                },
                //指向箭头
                edgeSymbol: ['circle', 'arrow'],
                //edgeSymbolSize: [1, 10],
                //连接线文字大小
                edgeLabel: {
                    normal: {
                        textStyle: {
                            fontSize: 20
                        }
                    }
                },
                data: datas,
                links: links,
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0
                    }
                }
            }]
        };
        var myChart = echarts.init(document.getElementById('flowChart'));
        myChart.setOption(option);
        window.addEventListener("resize", function () {
            myChart.resize();
        });
    }

    var taskId = $("#taskId").val();//任务id
    $.ajax({
        url: "/jobmanages/getTaskNodes",
        type: "POST",
        dataType: "json", //返回数据形式为json
        contentType: 'application/json;charset=UTF-8',
        data: JSON.stringify({"sysId": taskId}),
        success: function (res) {
            if (res.code == "200") {
                var item = res.data;
                flowChart(item);
            }
        }
    });

</script>

<script>
    jQuery(function ($) {
        $(".date-picker").datepicker({
            inline: true,
            format: "yyyymmdd",
            autoclose: true,
            todayHighlight: true,
            language: 'cn'
        }).next().on(ace.click_event, function () {
            $(this).prev().focus();
        });
    });
</script>
